<template>
  <div class="home">
   <!--主页布局-->
        <el-container class="home-contain">
            <!-- 头部布局 -->
            <el-header class="home-header">
                <div class="topleft">
                    <img src="../assets/logo.png" alt="">
                    <div>电商后台管理系统</div>
                </div> 
                <el-button @click="back" class="backbtn" size="small" type="danger">退出</el-button>
            </el-header>
            <el-container>
                <!-- 侧边栏 -->
                <el-aside :width="collapse?'64px':'200px'">
                     <div class="collnav" @click="tagglenav">  |||  </div>
                     <el-menu
                        :default-active="navpath"
                        background-color="#333744"
                        text-color="#fff"
                        active-text-color="#409Eff"
                        unique-opened 
                        :collapse="collapse"
                        :collapse-transition="false"
                        router>
                        <el-submenu :index="item.id+''" v-for="(item) in leftnavlists" :key="item.id">
                            <template slot="title">
                                <i :class="item.fontclass" style="margin-right:10px"></i>
                                <span>{{item.authName}}</span>
                            </template>
                            <el-menu-item :index="'/'+item1.path"  v-for="(item1) in item.children"
                             :key="item1.id" @click="savenavstate('/'+item1.path)">
                                <template slot="title">
                                    <i class="el-icon-menu"></i>
                                    <span>{{item1.authName}}</span>
                                </template>
                            </el-menu-item> 
                        </el-submenu>
                     </el-menu>
                </el-aside>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    <!-- -->
  </div>
</template>

<script>
export default {
    data() {
        return {
            navpath:"",//解决二级菜单刷新后选中样式失效的问题
            collapse:false,//控制左侧导航栏是否展示和折叠
            leftnavlists:[],// 左侧导航栏数据
            navfontlist:['iconfont icon-yonghu','iconfont icon-quanxian','iconfont icon-duomaishangpin',
            'iconfont icon-dingdanxiangqing-dingdanbianhao','iconfont icon-shuju'],//左侧导航栏一级图标
        }
    },
    created() {
        this.getleftnavdata() // 加载左侧导航栏数据
        this.navpath =  window.sessionStorage.getItem('navpath')
    },
    methods:{
        // 左侧导航栏数据
        async getleftnavdata(){
            const {data:res} = await this.$http.get('menus')
            if(res.meta.status!=200) return this.$message.error("获取左侧导航栏数据失败")
            this.leftnavlists = res.data
            this.addfonttonav() //整合数据把字体图标放进导航栏数据中
            
        },
        //整合数据把字体图标放进导航栏数据中
        addfonttonav(){
            this.leftnavlists.map((item,index)=>{
                item.fontclass = this.navfontlist[index]
            })
        },
        back(){
            window.sessionStorage.clear()
            this.$router.push('/login')
        },
        // 修改左侧导航栏的折叠和展开
        tagglenav(){
            this.collapse = !this.collapse
        },
        // 解决二级菜单刷新后选中样式失效的问题
        savenavstate(path) {
            // 保存在会话存储
            window.sessionStorage.setItem('navpath',path)
            this.navpath  = path
            
        }
    }
}
</script>

<style scoped>
.home{
    position: absolute;
    width: 100%;
    height: 100%;
}
.home-contain{
    height: 100%;
    width: 100%;
}
.home-header{
    display: block;
    height: 100px;
    background-color:#373D41;
    display: flex;
    align-items: center;
    justify-content:space-between
}
.topleft{
    display: flex;
    font-size: 20px;
    color: #ffffff;
    font-weight: 700;
    align-items: center;
}
.topleft img{
    width: 40px;
    height: 40px;
    margin-right: 10px;
}
.el-aside{
    background-color: #333744;
}  
.el-main{
    background-color: #Eaedf1;
} 
.el-button{
    display: block;
    width: 100px;
    height: 40px;
}
.el-menu{
    border:0
}
.collnav{
    background-color:#4A5064;
    font-size:10px;
    line-height: 24px;
    color: #fff;
    text-align: center;
    letter-spacing: 0.2em;
    cursor: pointer;
}
</style>